<template>
  <div>
    <div>
      <el-menu
        :default-active="activeIndex1"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">首页</el-menu-item>

        <el-menu-item index="2" >
          <el-button type="text" @click="movie_show" class="button">电影</el-button>
        </el-menu-item>
        <el-menu-item index="4" >
          <el-button type="text" @click="cinema_show" class="button">影院</el-button>
        </el-menu-item>
        <el-menu-item index="5" >
          <el-button type="text" @click="playing" class="button">演出</el-button>
        </el-menu-item>
        <el-menu-item index="6" >
          <el-button type="text" @click="movie_list" class="button">榜单</el-button>
        </el-menu-item>
        <el-menu-item index="7" >
          <el-button type="text" @click="hot_new" class="button">热点</el-button>
        </el-menu-item>
        <el-menu-item index="8" >
          <el-button type="text" @click="shopping_mall" class="button">商城</el-button>
        </el-menu-item>
        <el-submenu index="9" style="float: right">
          <template slot="title">
            <!--<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>-->
            <img style="border-radius:100%" :src=user.pic
                 class="avator"/>
            <span class="name"  style="color: black;">{{user.loginName}}</span>
          </template>
          <el-menu-item index="9-1" @click="login">用户登录</el-menu-item>
          <el-menu-item index="9-2">订单管理</el-menu-item>
          <el-menu-item index="9-3" @click="userDetail">个人信息</el-menu-item>
          <el-menu-item index="9-4" @click="logout">退出登录</el-menu-item>
        </el-submenu>
        <!--<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
      </el-menu>
    </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items:[],
                movie:[],
                activeIndex1: '2',
                key:1,
                user:{
                    pic:'',
                    loginName:''
                },
            };
        },
            methods: {
                logout() {
                    //用户退出
                        this.$axios.post("/user/loginOut").then(res => {
                            if (res.data.data==0) {
                                //cookie.remove("token")
                                //清除token
                                this.$cookies.remove("token")
                                //this.$router.push("/").catch(data => {  })
                                //刷新页面
                                location.reload()
                            }
                        })
                },
                //跳转用户登录
                login(){
                    this.$router.push("/login")
                },
                //跳转用户信息
                userDetail(){
                    this.$router.push("/userDetail")
                },

                movie_show:function () {
                    this.$router.push("/movieShow/");
                },
                cinema_show:function () {
                    this.$router.push("/cinemaShow/");
                },
                playing:function () {
                    this.$router.push("/playing/");
                },
                movie_list:function () {
                    this.$router.push("/movieList/");
                },
                hot_new:function () {
                    this.$router.push("/hotNew/");
                },
                shopping_mall:function () {
                    this.$router.push("/shoppingMall/");
                },
        },

        mounted() {
            this.$axios.post("/user/findUserByToken").then(res => {
                console.log(res.data)
                this.validate = res.data.data;
                if (res.data.code==0) {

                    this.user = res.data.data;
                }
                if (res.data.code == "10006") {
                    this.$router.push("/").catch(data => {  })
                }
            })
            this.restaurants = this.loadAll();
        }
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .avator {
    width: 40px;
    height: 40px;
  }
  .name {
    margin-top: 20px;
    color: #333;
  }
</style>
